<template>
    <div>
        <div class="question">
            <h1>问题列表</h1>
            <el-collapse class="collapse animate__animated animate__fadeInDown" v-model=consult.title @change="handleChange" >
                <el-collapse-item class="item" v-for="dict in consult"  :title=dict.title :name=dict.title>
                    <div class="username">用户:
                        {{dict.username}}
                    </div>
                    <div class="content">
                        {{dict.content}}
                    </div>
                    <div>
                        <el-button size="small" type="success" @click="getdetail(dict)" round>详细内容</el-button>
                    </div>
                </el-collapse-item>

            </el-collapse>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :total="total"
                    :current-page=currentPage
                    @current-change=page>
            </el-pagination>
        </div>
        <div class="post animate__animated animate__fadeIn" v-show="hasLogin">
            <el-image class="image"
                    style="width: 120px; height: 120px"
                      :src="user.avatar"
                    >
            </el-image>
            <el-divider><i class="el-icon-edit"></i></el-divider>
            <el-button class="bt" type="primary" @click="dialog = true" plain :disabled="question">咨询问题</el-button>
            <br>
            <el-button class="bt" plain :disabled="question" @click="myquestion()">我的问题</el-button>
            <br>
            <el-button class="bt" plain :disabled="answer" @click="myanswer()">我的回答</el-button>
        </div>


        <el-drawer
                title="咨询问题"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="ltr"
                custom-class="demo-drawer"
                ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form" ref="form">
                    <el-form-item label="问题标题" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth" style="display: none">
                        <el-input v-model="form.username"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth" style="display: none">
                        <el-input v-model="form.userid"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="问题内容" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.content" :rows="8" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                question:true,
                answer:true,
                hasLogin:false,
                dialog: false,
                loading: false,
                total: null,
                pageSize: null,
                currentPage: null,
                user:{
                    avatar:'https://www.gdpu.edu.cn/images/xh.png',
                    uuid:'',
                },
                consult:[
                    {
                    title:'问题标题',
                    content:'内容',
                    username:'用户名',
                },
                    {
                        title:'问题标题',
                        content:'内容',
                        username:'用户名',
                    },
                ],
                form: {
                    title:'',
                    content:'',
                    username:'',
                    userid:''
                },
                formLabelWidth: '80px',
                timer: null,

            };
        },
        methods: {
            handleChange(val) {
                console.log(val);
            },
            handleClose(done) {
                const _this = this
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        axios.post("http://localhost:8181/consult/addQ/",this.form).then(function (resp) {
                            _this.$message({
                                message: '提交成功,等待管理员审核',
                                type: 'success'
                            });
                        });
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {

                    });

            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            getdetail(dict){
                console.log(dict.id)
                this.$router.push({
                    path: '/questiondetail',
                    query: {
                        id: dict.id
                    }
                })
            },
            myquestion(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:'question'
                    }
                })
            },
            myanswer(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:'answer'
                    }
                })
            },
            page(currentPage){
                const _this = this
                axios.get("http://localhost:8181/consult/listQ?currentPage="+currentPage).then(function (resp) {
                    _this.consult = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            },

        },
        created() {
            const _this = this
            axios.get("http://localhost:8181/consult/listQ").then(function (resp) {
                _this.consult = resp.data.data.records
                _this.total = resp.data.data.total
                _this.currentPage = resp.data.data.current
                _this.pageSize = resp.data.data.size
            })
            if(this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.user.avatar = this.$store.getters.getUser.avatar
                this.user.uuid = this.$store.getters.getUser.id
                this.form.username = this.user.username
                this.form.userid = this.user.uuid
                this.hasLogin = true
            }

            if(this.$store.getters.getUser.type==1){
                _this.question = false
                _this.answer = true
            }else {
                _this.question = true
                _this.answer = false
            }

        },

    }
</script>

<style scoped>
    .question{
        margin-left: 50px;
        position: relative;
        background-color: rgb(255, 255, 255);
        width: 800px;
        height: 80%;
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 10px;
        padding: 5px;
    }
    .question h1{
        padding-top: 10px;
        margin-top: 5px;
        font-size: 1.8em;
        font-weight: 700;
    }
    .username{
        text-align: left;
        font-size: 0.8em;
        color: #0000FF;
    }
    .content{
        font-size: 1.4em;
        color: #8acada;
        margin: 10px;
    }
    .post{
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 80px;
        top: 120px;
        background-color: rgb(255, 255, 255);
        width: 300px;
        height: 400px;
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 10px;
    }
    .image{
        margin-top: 20px;
    }
    .bt{
        margin: 10px !important;
    }



</style>